<script lang="ts" setup>
	import AppProvider from '@/components/AppProvider/index.vue';
	import Iconify from '@/components/Iconify/index.vue';
	import { Toast } from '@/utils/uniapi/prompt';
	import { useAuthStore } from '@/state/modules/auth';
	import { useUserStore } from '@/state/modules/user';

	const authStore = useAuthStore();
	const userStore = useUserStore();
	const isLogin = ref(false);
	const router = useRouter();

	// 跳转
	const handleJump = (url : string) => {
		router.push(url);
	};

	// 登出
	const handleLoginOut = () => {
		authStore.loginOut().then(() => {
			isLogin.value = false;
		});
	};

	function handleJiaoLiuQun() {
		Toast('QQ群：988878')
	};

	function handleBuilding() {
		Toast('模块建设中~', { duration: 1500 });
	}

	onLoad(() => {
		console.log('mine load');
	});

	onShow(() => {
		isLogin.value = authStore.isLogin;
	});
</script>

<template>
	<AppProvider>
		<view class="mine-container">
			<!--顶部个人信息栏-->
			<view class="header-section">
				<view class="_u_flex _u_justify-between _u_items-center">
					<view class="_u_flex _u_items-center">
						<image :src="userStore.user?.avatar" class="cu-avatar _u_rd-10" mode="widthFix"></image>
						<view v-if="isLogin" @click="handleJump('/pages/mine/info/index')" class="user-info">
							<view class="u_title">
								{{ userStore.user?.name }}
							</view>
						</view>
						<view v-else @click="handleJump('/pages/login/index')" class="login-tip">
							点击登录
						</view>
					</view>
					<view v-if="isLogin" @click="handleJump('/pages/mine/info/index')" class="_u_flex">
						<text>个人信息</text>
						<Iconify icon="i-formkit-right" class="_u_ml-2" />
					</view>
				</view>
			</view>
			<view class="content-section">
				<view class="mine-actions _u_grid _u_grid-cols-4">
					<view class="action-item" @click="handleJiaoLiuQun">
						<Iconify icon="i-charm-people" color="#e03997" />
						<text class="text">交流群</text>
					</view>
					<view class="action-item" @click="handleBuilding">
						<Iconify icon="i-mingcute-service-fill" color="#0081ff" />
						<text class="text">在线客服</text>
					</view>
					<view class="action-item" @click="handleBuilding">
						<Iconify icon="i-uiw-message" color="#9c26b0" />
						<text class="text">反馈社区</text>
					</view>
					<view class="action-item" @click="handleBuilding">
						<Iconify icon="i-solar-like-broken" color="#39b54a" />
						<text class="text">点赞我们</text>
					</view> 
				</view>

				<view class="menu-list">
					<view class="list-cell" @click="handleJump('/pages/mine/info/edit')">
						<view class="menu-item-box">
							<Iconify icon="i-icon-park-outline-people" class="_u_mr-2" size="38" color="#007aff" />
							<view class="_u_text-[15px]">编辑资料</view>
						</view>
						<Iconify icon="i-formkit-right" color="#ccc" />
					</view>
					<view class="list-cell" @click="handleJump('/pages/mine/help/index')">
						<view class="menu-item-box">
							<Iconify icon="i-ph-question" class="_u_mr-2" size="38" color="#007aff" />
							<view class="_u_text-[15px]">常见问题</view>
						</view>
						<Iconify icon="i-formkit-right" color="#ccc" />
					</view>
					<view class="list-cell" @click="handleJump('/pages/mine/about/index')">
						<view class="menu-item-box">
							<Iconify icon="i-mdi-about-circle-outline" class="_u_mr-2" size="38" color="#007aff" />
							<view class="_u_text-[15px]">关于我们</view>
						</view>
						<Iconify icon="i-formkit-right" color="#ccc" />
					</view>
					<view class="list-cell" @click="handleJump('/pages/mine/setting/index')">
						<view class="menu-item-box">
							<Iconify icon="i-uil-setting" class="_u_mr-2" size="38" color="#007aff" />
							<view class="_u_text-[15px]">应用设置</view>
						</view>
						<Iconify icon="i-formkit-right" color="#ccc" />
					</view>
				</view>
			</view>
		</view>
	</AppProvider>
</template>

<style lang="scss" scoped>
	page {
		background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			width: 100%;
			height: 300rpx;
			padding: 70rpx 50rpx;
			background-color: #3c96f3;
			color: white;

			.cu-avatar {
				width: 110rpx;
				height: 110rpx;
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 20px 20px;
				padding: 20px 8px;
				border-radius: 8px;
				background-color: #fff;

				.action-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}

			.menu-list {
				background-color: #fff;
				margin: 20px 20px;

				.list-cell {
					position: relative;
					display: flex;
					justify-content: space-between;
					width: 100%;
					box-sizing: border-box;
					background-color: #fff;
					padding: 13px 15px;
					border-bottom: 1px solid #eee;

					.menu-item-box {
						display: flex;
						align-items: center;
					}
				}

				.list-cell:last-child {
					border-bottom: none
				}
			}
		}
	}
</style>